<template>
	<div class="content">
	<div class="loginview">
		<div class="headname">用户登录</div>
		<form>
			<li>
				<label for="username">
					用户名：<input type="text" v-model="userinfor.name" id="username" placeholder="请输入您的用户名" />
				</label>
			</li>
			<li>
				<label for="userpasword">
					密码：<input type="password" v-model="userinfor.pasword" id="userpasword"  />
				</label>
			</li>
			<button @click.prevent="login">登录</button>
			<li class="other clearfloat">
				<span>新用户</span>
				<span>忘记密码</span>
			</li>
		</form>
	</div>
	</div>
</template>

<script>
	//引入axios
	import axios from 'axios'
	import {ref,reactive} from 'vue'
	import {useRouter} from 'vue-router'
	export default {
		
		name: 'Loginview',
		setup(){
			var username = ref(username)
			var userpasword = ref(userpasword)
			let userinfor = reactive({
				name:'',
				pasword:''
			})
			const router = useRouter()
			//跳转到home页面
			// function routerhome(){
			// 	router.replace('/home')
			// }
			function login(){
				axios.post('http://localhost:5002/api/login',{
					data:userinfor
				}).then(
					// 请求获取成功回调
					response => {
						//console.log(response.data)
						const token = response.data.token
						//将token临时储存在本地浏览器
						window.sessionStorage.setItem('token',token)
						//routerhome()
						//console.log(router)
						//跳转到home页面
						router.replace('/home')
					},
					// 请求获取失败回调
					error => {
						console.log(error.message)
					}
				)
			}
			return {
				userinfor,
				login
			}
		}
	}
</script>

<style scoped>
	.loginview {
		font-size: 13px;
		text-align: right;
		padding: 10px;
		margin: 110px auto;
		width: 230px;
		background-color: #ffffff;
		border: 1px solid #34c8de;
		border-radius: 5px;
		box-shadow: 0 0 5px #34c8de;
	}
	.headname {
		text-align: left;
		font-size: 25px;
		margin: 5px auto;
	}
	li {
		margin: 25px auto;
	}
	input {
		width: 135px;
	}
	button {
		width: 150px;
		height: 40px;
		margin: 5px 40px;
		background-color: #96fbcd;
		border-radius: 5px;
		font-weight: 700;
	}
	.other {
		margin: 15px auto 5px auto;
	}
	.other span:first-child {
		float: left;
	}
	.other span:last-child {
		float: riight;
	}
</style>
